<template>
    <div>
        <Tabs v-model="active" :sticky="true" :border="false" background="#0DCDB5" color="#FFFFFF"
              title-active-color='#FFFFFF'
              title-inactive-color="#FFFFFF"
              :offset-top="navBarHeight"
              class="tabs">
            <Tab v-for="item in tabList" :title="item.title" :name="item.name" :key="item.id" @click="onTab">
                <List
                      v-model="loading"
                      :finished="finished"
                      finished-text="没有更多了~"
                      @load="onLoad"
                >
                    <div class="order-box" v-for="item in orderList" :key="item.smId"
                         @click="jumpPage(`orderInfo?orderId=${item.smId}`)">
                        <div class="acea-row row-middle row-between">
                            <div class="acea-row row-middle">
                                <img :src="orderLeftIcon" alt="order-left-icon" class="order-left-icon">
                                <div class="order-title">{{item.smOrderName}}</div>
                            </div>
                            <img :src="arrowRight" alt="arrow-right" class="arrow-right">
                        </div>
                        <div class="order-name">{{item.smActivityName}}</div>
                        <div class="acea-row row-middle row-between">
                            <div class="order-time acea-row row-column row-column-between">
                                <div>开始时间：{{item.smActivityStartDate | format}}</div>
                                <div>结束时间：{{item.smActivityEndDate | format}}</div>
                            </div>
                            <Button :icon="btnIcon" color="#FF8D51" class="bottom-btn" size="small" @click.self="onBtn"
                                    v-if="true">抢单
                            </Button>
                            <Button color="#F7F8FC" class="bottom-btn pass-btn" size="small" :disabled="true" v-else>已抢单
                            </Button>
                        </div>
                    </div>
                </List>
            </Tab>
        </Tabs>
    </div>
</template>

<script>
    import {Tab, Tabs, List, Button} from 'vant';
    import {getGrabList,getGrabCompleteList} from "../api/public";
    import dayjs from "dayjs";

    const loadImg = name => require(`@/assets/images/${name}.png`)

    export default {
        name: "RobOrder",
        components: {
            Tab,
            Tabs,
            List,
            Button
        },
        data() {
            return {
                active: '1',
                tabList: [
                    {
                        id: 1,
                        title: '新订单',
                        name: '1',
                    },
                    {
                        id: 2,
                        title: '已抢单',
                        name: '2',
                    }
                ],
                loading: false,
                finished: true,
                orderLeftIcon: loadImg('order_left_icon'),
                arrowRight: loadImg('arrow-right'),
                btnIcon: loadImg('Lightning'),
                orderList: [],
                pageNo: 1,
                flag: false,
                navBarHeight: 0,
            }
        },
        watch: {
            navBarHeight() {
                this.navBarHeight = 45
            }
        },
        created() {
            this.init(1)
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            jumpPage(page) {
                this.$router.push(page)
            },
            init(pageNo) {
                getGrabList(pageNo).then(res => {
                    this.loading = true;
                    this.orderList.push.apply(this.orderList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                    console.log(this.flag)
                })
            },
            init1(pageNo,userId){
                getGrabCompleteList(pageNo,userId).then(res => {
                    console.log(res)
                })
            },
            onTab(name) {
                console.log(name)
            },
            onLoad() {
                if (this.flag) {
                    this.pageNo++;
                    this.init(this.pageNo)
                } else {
                    this.finished = true;
                }
            },
            onBtn() {

            }
        }
    }
</script>

<style scoped lang="scss">
    .tabs {
        .order-box {
            margin: 15px auto;
            width: 355px;
            height: 150px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            padding: 20px;

            .order-left-icon {
                width: 15px;
                height: 15px;
            }

            .order-title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(66, 69, 95, 1);
                margin-left: 9px;
            }

            .arrow-right {
                width: 14px;
                height: 14px;
            }

            .order-name {
                font-size: 18px;
                font-weight: 500;
                color: rgba(66, 69, 95, 1);
                margin: 17px 0 10px;
            }

            .order-time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(163, 165, 177, 1);
                height: 40px;
            }

            .bottom-btn {
                width: 70px;
                height: 30px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1;
            }
        }
    }
</style>
